import React from 'react';
import { connect } from 'dva';
import userStyle from './user.less';

/**
 *	登录业务尽管从组件开始但需要从model成看起，登录信息就是用户，可能包含角色信息。
 *	1> 我们不在页面中发起请求，这就意味着我们不能依据服务端返回账号信息结果的回调函数来提示用户是否登录成功，
 *		不过我们好在有状态管理，如果用户登录失败我reducer激发登录信息错误，ant design pro也是这个处理办法。
 *	2> 我们不尝试在view中使用fetch\axion，也不会获取actions(dva称services)中的内容，我们只管获取参数、dispatch。
 */
class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'admin',
            password: '123456',
        };
    }
    render() {
        return (
            <div className={userStyle.login}>
                <h3>login</h3>

                <p style={{ display: this.props.loginResult, color: 'red' }}>
                    登录失败，请重新登录！
                </p>

                <p>
                    账号：
                    <input
                        type="text"
                        name="name"
                        value={this.state.name}
                        onChange={this.handleChange.bind(this)}
                    />
                </p>

                <p>
                    密码：
                    <input
                        type="text"
                        name="password"
                        value={this.state.password}
                        onChange={this.handleChange.bind(this)}
                    />
                </p>

                <p>
                    <button
                        type="button"
                        onClick={this.handleSubmit.bind(this)}
                    >
                        登录
                    </button>
                </p>
            </div>
        );
    }
    handleChange(evt) {
        this.setState({
            [evt.target.name]: evt.target.value,
        });
    }
    handleSubmit() {
        //前端提交用户参数到服务端登录
        this.props.dispatch({
            type: 'user/getUser',
            payload: this.state,
        });
    }
}

export default connect(function(state) {
    return {
        user: state.user.user,
        loginResult: state.user.loginResult,
    };
})(Login);
